<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-10-23 10:48:30
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-10-28 19:34:19
 * @FilePath: \vue-echarts\src\components\Pie.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="com-container">
   <div class="com-chart" ref="pie_ref"></div>
   <!-- 箭头图标 -->
   <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
   <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
   <span class="cat-name" :style="comStyle">{{ catName }}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null,
      allDate: null, // 服务器返回的数据
      currentIndex: 0, // 当前所展示的一级分类数据
      titleFontSize: 0
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    // 适配屏幕大小
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  // 计算当前的所展示的标题
  computed: {
    catName () {
      if (!this.allDate) {
        return ''
      } else {
        return this.allDate[this.currentIndex].name
      }
    },
    // 控制字体大小
    comStyle () {
      return {
        fontSize: this.titleFontSize + 'px'
      }
    }
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.pie_ref, 'chalk')
      const initOption = {
        title: {
          text: '热销商品',
          left: 20,
          top: 20
        },
        // 图例
        legend: {
          top: '15%',
          icon: 'circle' // 图例形状
        },
        tooltip: {
          show: true
          // 用来格式化图例文本，支持字符串模板和回调函数两种形式。
          // 使用回调函数
          // formatter: function (name) {
          //     return 'Legend ' + name;
          // }
          // forEach报错？
          // formatter: arg => {
          //   // console.log(arg)
          //   const thirdCategory = arg.data.children
          //   // 计算出所有三级分类的数值总和
          //   let total = 0
          //   thirdCategory.forEach(item => {
          //     total += item.value
          //   })
          //   let retStr = ''
          //   thirdCategory.forEach(item => {
          //     retStr += `
          //     ${item.name}:${parseInt(item.value / total * 100) + '%'}
          //     <br/>
          //     `
          //   })
          //   return retStr
          // }
        },
        series: [
          {
            type: 'pie',
            label: {
              show: false
            },
            // 高亮显示
            emphasis: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            },
            selectedMode: 'single'
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    // 获取服务器的数据
    async getData () {
      // http://127.0.0.1:8888/api/hotproduct
      const { data: ret } = await this.$http.get('hotproduct')
      this.allDate = ret
      // console.log(this.allDate)
      // 更新
      this.updateChart()
      this.screenAdapter()
    },
    updateChart () {
      // 获取一级分类数据
      const seriesData = this.allDate[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value
        }
      })
      // 图例数据
      const legendData = this.allDate[this.currentIndex].children.map(item => {
        return {
          name: item.name
        }
      })
      const dataOption = {
        legend: {
          data: legendData
        },
        series: [
          {
            data: seriesData
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    // 点击 > 事件，需要进行边界判断
    toLeft () {
      this.currentIndex--
      if (this.currentIndex < 0) {
        this.currentIndex = this.allDate.length - 1
      }
      this.updateChart()
    },
    // 点击 < 事件，需要进行边界判断
    toRight () {
      this.currentIndex++
      if (this.currentIndex > this.allDate.length - 1) {
        this.currentIndex = 0
      }
      this.updateChart()
    },
    screenAdapter () {
      // 获取容器宽度
      this.titleFontSize = this.$refs.pie_ref.offsetWidth / 100 * 3.6
      const adapterOption = {
        // 和分辨率大小相关的配置项
        title: {
          textStyle: {
            fontSize: this.titleFontSize
          }
        },
        legend: {
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemGap: this.titleFontSize / 2,
          textStyle: {
            fontSize: this.titleFontSize
          }
        },
        series: [
          {
            radius: this.titleFontSize * 4.5,
            center: ['50%', '60%']
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  }
}
</script>
<style lang="less" scoped>

.arr-left{
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  cursor: pointer;
}
.arr-right{
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  cursor: pointer;
}
.cat-name{
  position: absolute;
  right: 25%;
  bottom: 10%;
  color: white;
}

</style>
